<template>
	<view class="message-list">
		<view class="icon">
			<cl-badge :value="item.badge">
				<cl-image :size="100" :src="item.avatarUrl" round>
					<view class="error" slot="error">
						<text class="iconfont icon-group-avatar"></text>
					</view>
				</cl-image>
			</cl-badge>
		</view>

		<view class="content">
			<text class="name">{{ item.name }}</text>
			<text class="message"><rich-text :nodes="item.message"></rich-text></text>
		</view>

		<view class="append">
			<text class="date">{{ item.date }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		icon: String,
		item: Object
	},

	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.message-list {
	display: flex;
	align-items: center;
	height: 100rpx;
	padding: 25rpx 38rpx;

	&:active {
		background-color: #f7f7f7;
	}

	.icon {
		flex-shrink: 0;

		.error {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 100%;
			border-radius: 100%;
			background-color: #6933ff;
			color: #fff;
			font-size: 70rpx;
		}
	}

	.content {
		margin: 0 38rpx;
		display: flex;
		flex-direction: column;
		flex: 1;

		.name {
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.message {
			font-size: 24rpx;
			color: #999;
		}
	}

	.append {
		display: flex;
		align-items: center;
		flex-shrink: 0;

		.date {
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style>